<script lang="ts" setup>
  import { ArrowLeftOutlined } from '@ant-design/icons-vue'
  import { reactive, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { requestGetCompanyById } from '/@/api/business/company/org'
  import IdentityDetails from '/@/components/IdentityDetails.vue'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  import TemplateDetails from './components/TemplateDetails.vue'
  const router = useRouter()
  const route = useRoute()
  const companyId = route.query.id || null
  const data: any = ref({})
  const variable = reactive({
    activeKey1: 0,
    activeKey2: 0,
  })
  const modalIdentity = reactive({
    visible: false,
    id: '',
  })
  const modalTemplate = reactive({
    visible: false,
    templateId: '',
  })
  const plainOptions: string[] = ['身份发行机构', '身份模拟机构', '应用机构'] //  0身份发行 1身份模板 2业务应用
  const companyLabel = ref([])
  const identityInfos: any = ref([
    { name: '个人身份', key: 0, list: [] },
    { name: '设备身份', key: 1, list: [] },
  ])
  const identityTemplates: any = ref([
    { name: '个人身份模板', key: 0, list: [] },
    { name: '设备身份模板', key: 1, list: [] },
  ])
  const getCompanyById = async () => {
    const { responseCode, responseData } = await requestGetCompanyById({
      companyId: Number(companyId),
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      data.value = responseData
      const label: string[] = responseData.companyLabel.split(',')
      for (let i = 0; i < label.length; i++) {
        companyLabel.value.push(plainOptions[label[i]])
      }
      responseData.identityInfos.forEach((item: any) => {
        identityInfos.value[item.identityTemplateType].list.push(item)
      })
      responseData.identityTemplates.forEach((item) => {
        for (let i = 0; i < 3; i++) {
          identityTemplates.value[item.templateType].list.push(item)
        }
      })
    }
  }
  getCompanyById()
  const checkIdentity = (item) => {
    modalIdentity.id = item.id
    modalIdentity.visible = true
  }
  const checkTemplate = (record) => {
    modalTemplate.templateId = record.id
    modalTemplate.visible = true
  }
</script>

<template>
  <div class="org-list-details">
    <div class="add-header">
      <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="router.back()" />
      <span>详情</span>
    </div>
    <a-divider />
    <div class="details-content">
      <div class="add-title">
        <span class="title">机构信息</span>
      </div>
      <div class="details-item">
        <div>机构名称</div>
        <div>{{ data.companyName }}</div>
      </div>
      <div class="details-item">
        <div>统一社会信用代码</div>
        <div>{{ data.socialUnifiedCode }}</div>
      </div>
      <div class="details-item">
        <div>联系人</div>
        <div>{{ data.companyContactName }}</div>
      </div>
      <div class="details-item">
        <div>联系人电话</div>
        <div>{{ data.companyContactPhone }}</div>
      </div>
      <div class="details-item-row">
        <div>机构简介</div>
        <div>{{ data.companyDesc || '无' }}</div>
      </div>
      <div class="details-item-row">
        <div>机构标识</div>
        <div>
          <a-checkbox-group v-model:value="companyLabel" name="checkboxgroup" :options="companyLabel" />
        </div>
      </div>

      <div class="add-title">
        <span class="title">绑定管理员账号</span>
      </div>
      <div class="details-item-row">
        <div>数字钱包账号</div>
        <div>{{ data.companyAccount }}</div>
      </div>

      <div class="add-title">
        <span class="title">身份发行</span>
      </div>
      <a-tabs v-model:activeKey="variable.activeKey1">
        <a-tab-pane v-for="item in identityInfos" :key="item.key" :tab="item.name">
          <template v-if="item.list.length">
            <div class="card" v-for="card in item.list" :key="card.id" @click="checkIdentity(card)">
              <span class="icon-box"></span>
              <div class="content">
                <div>
                  <a-tooltip>
                    <template #title>{{ card.identityName }}</template>
                    {{ card.identityName }}
                  </a-tooltip>
                </div>
                <div>
                  <span>发行机构：</span>
                  <a-tooltip>
                    <template #title>{{ data.companyName }}</template>
                    {{ data.companyName }}
                  </a-tooltip>
                </div>
              </div>
            </div>
          </template>
          <div v-else>暂无数据</div>
        </a-tab-pane>
      </a-tabs>

      <div class="add-title" style="margin-top: 40px">
        <span class="title">身份模板</span>
      </div>
      <a-tabs v-model:activeKey="variable.activeKey2">
        <a-tab-pane v-for="item in identityTemplates" :key="item.key" :tab="item.name">
          <template v-if="item.list.length">
            <div class="card" v-for="card in item.list" :key="card.id" @click="checkTemplate(card)">
              <span class="icon-box"></span>
              <div class="content">
                <div>
                  <a-tooltip>
                    <template #title>{{ card.templateName }}</template>
                    {{ card.templateName }}
                  </a-tooltip>
                </div>
                <div>
                  <span>模板机构：</span>
                  <a-tooltip>
                    <template #title>{{ data.companyName }}</template>
                    {{ data.companyName }}
                  </a-tooltip>
                </div>
              </div>
            </div>
          </template>
          <div v-else>暂无数据</div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <template-details v-model:visible="modalTemplate.visible" :template-id="modalTemplate.templateId" />
    <identity-details v-model:visible="modalIdentity.visible" :id="modalIdentity.id" />
  </div>
</template>

<style lang="less" scoped>
  .org-list-details {
    background: #fff;
    padding-bottom: 32px;

    .add-header {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      padding: 22px 0 0 26px;
    }

    .add-title {
      margin-bottom: 24px;
      clear: both;

      &::before {
        content: '';
        width: 3px;
        height: 13px;
        display: inline-block;
        background: #13c2c2;
        margin-right: 3px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #00474f;

        &::before {
          content: '';
          width: 2px;
          height: 10px;
          display: inline-block;
          background: #13c2c2;
          margin-right: 8px;
        }
      }
    }

    .details-content {
      padding: 12px 48px;
      width: 80%;
      margin: auto;

      .details-item {
        box-sizing: border-box;
        width: 40%;
        display: inline-block;
        margin-bottom: 24px;

        div:nth-child(1) {
          color: #000;
        }

        div {
          margin-bottom: 6px;
        }
      }

      .details-item-row {
        margin-bottom: 24px;
        word-wrap: break-word;

        div:nth-child(1) {
          color: #000;
        }

        div {
          margin-bottom: 6px;
        }
      }
    }
  }
</style>
